<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>[Generic Component Framework v3] Transfigure Example</title>
<link href="doxygen.css" rel="stylesheet" type="text/css">
<!--link href="tabs.css" rel="stylesheet" type="text/css"-->
</head><body>
 <div id="wrapper">
    <div id="logo_box">
        <a class="img_link" href="https://github.com/pnudupa/gcf" target="_blank" ><img style="float:left;margin-left:10px;margin-top:5px;margin-bottom:5px;"src="header_gcf_logo.jpg" alt="GCF LOGO"/></a>
        <a class="img_link" href="https://www.vcreatelogic.com/" target="_blank" ><img style="float:right;margin-right:10px; margin-top: 30px;" src="header_vcl_logo.jpg" alt="VCL LOGO"/></a>
        <div style="clear:both"></div>
    </div>
    <div class="nav">
        <ul>
            <li class="selectedpage">
                <a class="a-home" href="index.html" >
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a class="a-classes " href="classes.html">
                    <span>All Classes</span>
                </a>
            </li>
            <li>
                <a class="a-home " href="gcf_modules.html">
                    <span>Modules</span>
                </a>
            </li>
            <li>
                <a class="a-home " href="gcf_guides_and_videos.html">
                    <span>Guides & Videos</span>
                </a>
            </li>
            <li>
                <a class="a-home " href="gcf_tools_and_inbuilt_components.html">
                    <span>Tools & Components</span>
                </a>
            </li>
        </ul>
    </div>
    <div id="main-content">
        <div class="inside">
        <div>
<!-- Generated by Doxygen 1.8.16 -->
</div><!-- top -->
<div class="PageDoc"><div class="header">
  <div class="headertitle">
<div class="title">Transfigure Example </div>  </div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul><li class="level1"><a href="#gcf_transfigure_1">Launching Transfigure</a></li>
<li class="level1"><a href="#gcf_transfigure_2">Applying image filters</a></li>
</ul>
</div>
<div class="textblock"><p>This program showcases the use of GCFQuick3 module to build component based QML applications. Transfigure is an application using which you can load images, apply one or more effect filters on it and preview the filtered image. The whole point of this application is to showcase the use of GCFQuick3 module and the usage of GCF's component-architecture in a QML application.</p>
<p>This page does not explain the source code of the example. We encourage you to study the source code to get a sense of how GCFQuick3 module can be leveraged in your applications.</p>
<h1><a class="anchor" id="gcf_transfigure_1"></a>
Launching Transfigure</h1>
<p>Launch the Transfigure application from the <code>$GCFDIR/Binary/Examples</code> folder. You will notice a window as shown below.</p>
<div class="image">
<img src="transfigure.png" alt=""/>
</div>
<p>You can click on the <b>Open</b> button to select an image file and view it.</p>
<div class="image">
<img src="transfigure1.png" alt=""/>
</div>
<p>The +, o and - buttons help you to zoom in and out of the image. You can click and drag the image to pan. Apart from basic viewing, you cannot do anything more with the image.</p>
<h1><a class="anchor" id="gcf_transfigure_1"></a>
Launching Transfigure</h1>
<p>If you look at the $GCFDIR/Binary/Examples folder you will find the following</p>
<pre class="fragment">./Transfigure
./TransfigureComponents
./TransfigureComponents/libAdvancedFilters.dylib
./TransfigureComponents/libBasicFilters.dylib
</pre><p>A folder called <code>TransfigureComponents</code> contains two GCF components: AdvancedFilters and BasicFilters. You can load those components using the <code>&ndash;loadComponents:</code> command-line argument as follows.</p>
<pre class="fragment">$ cd $GCFDIR/Binary/Examples
$ ./Transfigure --loadComponents:TransfigureComponents/BasicFilters,TransfigureComponents/AdvancedFilters
</pre><p>When launched this way, you will now notice a long list of filters on the right panel.</p>
<div class="image">
<img src="transfigure2.png" alt=""/>
</div>
<dl class="section note"><dt>Note</dt><dd>The Transfigure example chooses to load components only in response to the <code>&ndash;loadComponents:</code> command-line argument. While writing your GCF applications you can invent any other way of your choice.</dd></dl>
<h1><a class="anchor" id="gcf_transfigure_2"></a>
Applying image filters</h1>
<p>After loading an image file you can click on any of the filter buttons to apply the image filter. Shown below is the result of applying "Pencil 1" filter on an image.</p>
<div class="image">
<img src="transfigure3.png" alt=""/>
</div>
 </div></div><!-- contents -->
</div><!-- PageDoc -->
</div>
</div>
</div>
<div class="footer_content">
<table width="100%" class="footer">
<tr>
<td align="left" width="50%">Copyright &copy; 2013-2019,
 <a class="el" href="http://www.vcreatelogic.com" target="_black">VCreate Logic Private Limited</a></td>
<td align="right" width="50%"><a class="el" href="http://www.vcreatelogic.com/products/gcf" target="_black">GCF - Generic Component Framework</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
